<%--
  Created by IntelliJ IDEA.
  User: taohj
  Date: 2014/12/19
  Time: 9:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<%

    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<html>
<head>
    <title>数据挖掘分析系统</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" type="text/css" href="../resources/js/lib/jquery-easyui-1.4.1/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../resources/js/lib/jquery-easyui-1.4.1/themes/icon.css">

    <script type="text/javascript" src="../resources/js/lib/jquery-1.11.2.js"></script>
    <script type="text/javascript" src="../resources/js/lib/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../resources/js/lib/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>


    <script type="application/javascript" src="resources/js/lib/utils.js" charset="UTF-8"></script>



    <style>
        input.textbox-value{
            overflow:scroll;
        }
        textarea.textbox-text{
            overflow:scroll;
        }

    </style>

    <script>

        var tabs, tabs_0, tabs_1,tabs_2,tabs_3;

        $(function () {



            //获得标签页
            tabs = $("#tabs");
            tabs_0 = tabs.tabs("getTab", 0);
            tabs_1 = tabs.tabs("getTab", 1);
            tabs_2=tabs.tabs("getTab", 2);
            tabs_3=tabs.tabs("getTab",3);




            //文件上传表单
            var form =tabs_0.find("form[name=fileuploadForm]");
            form.find("input[type=file]").on("change", function () {
                var value = $(this).val();
                if (value) {

                    form.submit();
                }
            });



            //分类算法 选择按钮 点击事件
            tabs_1.find("a[name=classify_choose]").on("click", function () {
                var dialog = $("<div><div></div></div>");
                var tree = dialog.find("div");
                dialog.dialog({
                    title: '选择算法',
                    width: 400,
                    height: 400,
                    closed: false,
                    cache: false,
                    modal: true,
                    top: 120,
                    buttons: [
                        {
                            text: '确定',
                            handler: function () {

                                var classfiyNode = tree.tree("getSelected");
                                tabs_1.find("#classify_choose_view_input").textbox("setValue", classfiyNode.text);
                                tabs_1.find("input[name=classify_choose_classify_class]").val(classfiyNode.id);


                                dialog.dialog("close");
                            }
                        },
                        {
                            text: '取消',
                            handler: function () {
                                dialog.dialog("close");
                            }
                        }
                    ]
                });

                tree.tree({
                    url: 'resources/js/data/classifiers.json'
                });

            });



            //分类算法参数 算法说明
            tabs_1.find("input[name=params]").closest("div").find("a:last-child").on('click',function(){
                var title=tabs_1.find("#classify_choose_view_input").textbox("getValue");
                var classes= tabs_1.find("input[name=classify_choose_classify_class]").val();
                viewdocs(tabs_1,title,classes);
            });



            // //分类算法 开始按钮 点击事件
            var classify_start_btn = tabs_1.find("#classify_start_btn").on("click", function () {
                var classify_result_view_input = tabs_1.find("#classify_result_view_input");
                classify_result_view_input.textbox("setValue", "");
                var classifyer = tabs_1.find("input[name=classify_choose_classify_class]").val();
                var option=tabs_1.find("input[textboxname=params]").val();

                $.post("classifyServlet", {action: "start", classifyer: classifyer,option:option}, function (data) {
                    classify_result_view_input.textbox("setValue", data);
                });
            });






            //聚类算法 算法选择按钮点击事件
            tabs_2.find("a[name=clusterers_choose]").on("click", function () {
                var dialog = $("<div><div></div></div>");
                var tree = dialog.find("div");
                dialog.dialog({
                    title: '选择算法',
                    width: 400,
                    height: 400,
                    closed: false,
                    cache: false,
                    modal: true,
                    top: 120,
                    buttons: [
                        {
                            text: '确定',
                            handler: function () {

                                var classfiyNode = tree.tree("getSelected");
                                tabs_2.find("#clusterers_choose_view_input").textbox("setValue", classfiyNode.text);
                                tabs_2.find("input[name=clusterers_choose_classify_class]").val(classfiyNode.id);


                                dialog.dialog("close");
                            }
                        },
                        {
                            text: '取消',
                            handler: function () {
                                dialog.dialog("close");
                            }
                        }
                    ]
                });

                tree.tree({
                    url: 'resources/js/data/clusterers.json'
                });

            });



            tabs_2.find("input[name=params]").closest("div").find("a:last-child").on('click',function(){
                var title=tabs_2.find("#clusterers_choose_view_input").textbox("getValue");
                var classes= tabs_2.find("input[name=clusterers_choose_classify_class]").val();
                viewdocs(tabs_2,title,classes);
            });








            // //聚类算法 开始按钮 点击事件
            tabs_2.find("#clusterers_start_btn").on("click", function () {

                var clusterers_result_view_input = tabs_2.find("#clusterers_result_view_input");
                clusterers_result_view_input.textbox("setValue", "");
                var clusterers = tabs_2.find("input[name=clusterers_choose_classify_class]").val();


                var option=tabs_2.find("input[textboxname=params]").val();
                $.post("clustererServlet", {action: "start", clusterers: clusterers,option:option}, function (data) {
                    clusterers_result_view_input.textbox("setValue", data);
                });
            });






            tabs_3.find("a[name=clusterers_choose]").on("click", function () {
                var dialog = $("<div><div></div></div>");
                var tree = dialog.find("div");
                dialog.dialog({
                    title: '选择算法',
                    width: 400,
                    height: 400,
                    closed: false,
                    cache: false,
                    modal: true,
                    top: 120,
                    buttons: [
                        {
                            text: '确定',
                            handler: function () {

                                var classfiyNode = tree.tree("getSelected");
                                tabs_3.find("#clusterers_choose_view_input").textbox("setValue", classfiyNode.text);
                                tabs_3.find("input[name=clusterers_choose_classify_class]").val(classfiyNode.id);


                                dialog.dialog("close");
                            }
                        },
                        {
                            text: '取消',
                            handler: function () {
                                dialog.dialog("close");
                            }
                        }
                    ]
                });

                tree.tree({
                    url: 'resources/js/data/associator.json'
                });

            });

            tabs_3.find("input[name=params]").closest("div").find("a:last-child").on('click',function(){
                var title=tabs_3.find("#clusterers_choose_view_input").textbox("getValue");
                var classes= tabs_3.find("input[name=clusterers_choose_classify_class]").val();
                viewdocs(tabs_3,title,classes);
            });



            // //聚类算法 开始按钮 点击事件
            tabs_3.find("#clusterers_start_btn").on("click", function () {

                var clusterers_result_view_input = tabs_3.find("#clusterers_result_view_input");
                clusterers_result_view_input.textbox("setValue", "");
                var associator = tabs_3.find("input[name=clusterers_choose_classify_class]").val();
                var option=tabs_3.find("input[textboxname=params]").val();

                $.post("associationsServlet", {action: "start", associator: associator,option:option}, function (data) {
                    clusterers_result_view_input.textbox("setValue", data);
                });
            });

        });














        function test(data) {


            console.info(data);
            var datagrid = tabs.find("#attributes_datagrid");

            datagrid.datagrid("loadData", data.attributes);

            tabs_0.find("span[name=numAttributes]").html(data.numAttributes);

            tabs_0.find("span[name=numInstances]").html(data.numInstances);

            tabs_0.find("span[name=relationName]").html(data.relationName);


        }





        var progressdialog;
        var interval;





        $(document).ajaxStart(function(){

            progressdialog=$("<div><div></div></div>");
           var progressbar=progressdialog.find("div");

            progressdialog.dialog({
                modal:true,
                width:500,
                title:'正在处理....请稍后...',
                height:60
            });

            progressbar.progressbar({
                value:0
            });


           interval=setInterval(function () {

                var value = progressbar.progressbar('getValue');
                if (value < 100){
                    value= value+Math.floor(Math.random() * 10);
                    progressbar.progressbar('setValue', value);
                }else{
                    clearInterval(interval)
                }

            },200);
        });










        $(document).ajaxComplete(function(){
           clearInterval(interval);
            progressdialog.dialog('destroy');

        });




    </script>

</head>
<body>


<div id="dd" class="easyui-dialog" title="数据挖掘分析系统" style="width:1000px;height:612px;"
     data-options="resizable:true,modal:true,closable:false,draggable:false,top:50">

    <div id="tabs" class="easyui-tabs" data-options="fit:true,closable:false">
        <div title="预处理 " data-options="closable:false">


            <div style="padding: 10px;margin-top: 10px;">
                <div style="width: 100px;float: left">
                    <iframe id="fileuploadIframe" name="ajaxUpload" style="display:none"></iframe>
                    <form name="fileuploadForm" id="from1" method="post" action="fileUploadServlet"
                          enctype="multipart/form-data"
                          target="ajaxUpload">
                        <input type="file" name="file" style="display: none">
                        <a id="btn" href="javascript:void(0);" onclick="$(this).prev().click();"
                           class="easyui-linkbutton" style="width: 100px">
                            打开文件
                        </a>
                    </form>
                </div>

                <div style="width: 100px;float: left;margin-left: 10px">
                    <a id="btn" href="javascript:void(0);" class="easyui-linkbutton" style="width: 100px">
                        打开网址
                    </a>
                </div>

                <div style="width: 100px;float: left;margin-left: 10px">
                    <a id="btn" href="javascript:void(0);" class="easyui-linkbutton" style="width: 100px">
                        打开数据库
                    </a>
                </div>

                <div style="width: 100px;float: left;margin-left: 10px">
                    <a id="btn" href="javascript:void(0);" class="easyui-linkbutton" style="width: 100px">
                        生成...
                    </a>
                </div>


                <div style="width: 100px;float: left;margin-left: 10px">
                    <a id="btn" href="javascript:void(0);" class="easyui-linkbutton" style="width: 100px">
                        上一步
                    </a>
                </div>


                <div style="width: 100px;float: left;margin-left: 10px">
                    <a id="btn" href="javascript:void(0);" class="easyui-linkbutton" style="width: 100px">
                        编辑
                    </a>
                </div>

                <div style="width: 100px;float: left;margin-left: 10px">
                    <a id="btn" href="javascript:void(0);" class="easyui-linkbutton" style="width: 100px">
                        另存为
                    </a>
                </div>
            </div>

            <div style="clear: both;padding:0px 10px 10px 6px;border: 1px solid rgb(221,221,221)">
                <div style="padding: 6px 0px 6px 10px;">过滤器</div>
                <div>
                    <a class="easyui-linkbutton" style="width: 50px;">选择</a>
                    <input class="easyui-textbox" style="width: 650px;height: 26px; font-size: 24px" value="全不选"
                           readonly>
                    <a class="easyui-linkbutton" style="width: 50px;">应用</a>
                </div>
            </div>


            <div>
                <div style="width: 380px;height:300px;float: left;padding: 6px;">
                    <div style="border: 1px solid rgb(221,221,221)">
                        <div style="padding: 6px 0px 0px 10px;">关系显示</div>
                        <div style="padding: 8px 0px 6px 10px;">
                            关系：<span name="relationName"></span><br/>
                            样本：<span name="numInstances">0</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;属性:<span
                                name="numAttributes">0</span>

                        </div>
                    </div>

                    <div style="border: 1px solid rgb(221,221,221);margin-top: 8px;">
                        <div style="padding: 6px 0px 0px 10px;">属性</div>
                        <div style="padding: 8px 0px 6px 0px;text-align: center">
                            <div>
                                <a href="javascript:void(0);" class="easyui-linkbutton"
                                   style="width: 80px;margin-left: 0px">全选</a>
                                <a href="javascript:void(0);" class="easyui-linkbutton"
                                   style="width: 80px;margin-left: 0px">全不选</a>
                                <a href="javascript:void(0);" class="easyui-linkbutton"
                                   style="width: 80px;margin-left: 0px">转换</a>
                                <a href="javascript:void(0);" class="easyui-linkbutton"
                                   style="width: 80px;margin-left: 0px">模式选择</a>
                            </div>

                            <div style="height: 200px;margin-top: 8px;">
                                <table id="attributes_datagrid" class="easyui-datagrid"
                                       data-options="fit:true,rownumbers:true">
                                    <thead>
                                    <tr>
                                        <th data-options="field:'code1',width:20,checkbox:true"></th>
                                        <th data-options="field:'name',width:290">名称</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>

                            <div style="margin-top: 10px;">
                                <a href="javascript:void(0);" class="easyui-linkbutton"
                                   style="width: 370px;margin-left: 0px">移除</a>
                            </div>
                        </div>


                    </div>

                </div>
                <div style="width: 390px;height:370px;float: left;">

                </div>
            </div>
        </div>
        <div title=" &nbsp;分类算法&nbsp; " data-options="closable:false" style="padding: 6px 6px 0 6px;">


            <div style="padding-left: 10px;border: 1px solid rgb(221,221,221);padding-top: 10px;  ">
                <div>分类器选择</div>
                <div style="min-height: 40px;padding: 6px">

                  <div>
                      <a class="easyui-linkbutton" style="width: 60px" name="classify_choose">选择</a>&nbsp;<input
                          id="classify_choose_view_input" class="easyui-textbox" type="text"
                          style="width: 600px;"/> <input name="classify_choose_classify_class" type="hidden"/>
                  </div>

                  <div>
                      &nbsp;&nbsp;&nbsp;
                      参数：
                      <input class="easyui-textbox" type="text"  style="width: 600px" name="params">
                      <a href="javascript:void(0)" onclick="">参数说明</a>
                  </div>
                </div>
            </div>


            <div style="height: 450px;padding-left: 0px;float: left;margin-top: 10px;">

                <div style="width: 240px;border: 1px solid  rgb(221,221,221);padding-bottom: 6px;">
                    <div style="padding: 6px 0px 6px 10px;">测试选项</div>
                    <div>
                        <input type="radio"> 使用训练集 <br/>
                        <input type="radio"> 供测试集 <br/>
                        <input type="radio"> 交叉验证 <br/>
                        <input type="radio"> 使用部分作为训练集 <br/>
                        <a class="easyui-linkbutton" style="width: 220px;margin-left: 8px;margin-top: 10px;">更多选项</a>

                    </div>
                </div>

                <div style="padding: 10px 0 10px 0;">
                    <select class="easyui-combobox" style="width: 240px;height: 26px;" data-options="editable:false">
                        <option>目标变量</option>
                    </select>
                </div>

                <div style="padding: 0px 0 0 0;">
                    <a id="classify_start_btn" class="easyui-linkbutton" style="width: 110px;margin-left: 8px;">开始</a>
                    <a class="easyui-linkbutton" style="width: 110px;margin-left: 8px;">停止</a>
                </div>

                <div>
                    <div style="padding: 6px 0 0 10px;height: 24px;">输出结果</div>
                    <div>
                        <input class="easyui-textbox" data-options="multiline:true,editable:false"
                               style="width: 240px;height: 190px;">
                    </div>
                </div>

            </div>

            <div style="width: 700px;float: right;border: 1px solid rgb(221,221,221);margin-top: 10px;padding: 4px">
                <div style="padding: 8px 0 0 10px;height: 24px;">分类器输出结果</div>
                <div>
                    <input class="easyui-textbox" data-options="multiline:true,editable:false"
                           id="classify_result_view_input"
                           style="width: 100%;height: 400px;">

                  <%--  <div  id="classify_result_view_input"
                          style="width: 100%;height: 400px;border: 1px solid rgb(221,221,221)">

                    </div>--%>


                </div>
            </div>


        </div>
        <div title="&nbsp;&nbsp;聚类算法&nbsp;&nbsp; " data-options="closable:false" style="padding: 6px 6px 0 6px;">

            <div style="padding-left: 10px;border: 1px solid rgb(221,221,221);padding-top: 10px;  ">
                <div>聚类算法选择</div>
                <div style="min-height: 40px;padding: 6px">

                    <div>
                        <a class="easyui-linkbutton" style="width: 60px" name="clusterers_choose">选择</a>&nbsp;<input
                            id="clusterers_choose_view_input" class="easyui-textbox" type="text"
                            style="width: 600px;"/> <input name="clusterers_choose_classify_class" type="hidden"/>
                    </div>

                    <div>
                        &nbsp;&nbsp;&nbsp;
                        参数：
                        <input class="easyui-textbox" type="text"  style="width: 600px" name="params">
                        <a href="javascript:void(0)" onclick="">参数说明</a>
                    </div>
                </div>
            </div>



            <div style="height: 450px;padding-left: 0px;float: left;margin-top: 10px;">

                <div style="width: 240px;border: 1px solid  rgb(221,221,221);padding-bottom: 6px;">
                    <div style="padding: 6px 0px 6px 10px;">测试选项</div>
                    <div>
                        <input type="radio"> 使用训练集 <br/>
                        <input type="radio"> 供测试集 <br/>
                        <input type="radio"> 使用部分作为训练集<br/>
                        <input type="radio"> 评价 <br/>

                        <select class="easyui-combobox" style="width: 220px;height: 26px;margin: 6px 0 6px 61px;" data-options="editable:false">
                            <option>Nom</option>
                        </select>


                        <input type="checkbox"/> 可视化 <br/>



                    </div>
                </div>

                <div style="padding:6px 0 6px 0;">
                    <a class="easyui-linkbutton" style="width: 220px;margin-left: 8px;margin-top: 10px;">忽略属性</a>
                </div>

                <div style="padding: 0px 0 0 0;">
                    <a id="clusterers_start_btn" class="easyui-linkbutton" style="width: 110px;margin-left: 8px;">开始</a>
                    <a class="easyui-linkbutton" style="width: 110px;margin-left: 8px;">停止</a>
                </div>

                <div>
                    <div style="padding: 6px 0 0 10px;height: 24px;">输出结果</div>
                    <div>
                        <input class="easyui-textbox" data-options="multiline:true,editable:false"
                               style="width: 240px;height: 190px;">
                    </div>
                </div>

            </div>

            <div style="width: 700px;float: right;border: 1px solid rgb(221,221,221);margin-top: 10px;padding: 4px">
                <div style="padding: 8px 0 0 10px;height: 24px;">分类器输出结果</div>
                <div>
                    <input class="easyui-textbox" data-options="multiline:true,editable:false"
                           id="clusterers_result_view_input"
                           style="width: 100%;height: 400px;">

                    <%--  <div  id="classify_result_view_input"
                            style="width: 100%;height: 400px;border: 1px solid rgb(221,221,221)">

                      </div>--%>


                </div>
            </div>


        </div>



        <div title="&nbsp;&nbsp;关系算法&nbsp;&nbsp; " data-options="closable:false" style="padding: 6px 6px 0 6px;">

            <div style="padding-left: 10px;border: 1px solid rgb(221,221,221);padding-top: 10px;  ">
                <div>选择</div>
                <div style="min-height: 40px;padding: 6px">
                   <div>
                       <a class="easyui-linkbutton" style="width: 60px" name="clusterers_choose">选择</a>&nbsp;<input
                           id="clusterers_choose_view_input" class="easyui-textbox" type="text"
                           style="width:400px;"/> <input name="clusterers_choose_classify_class" type="hidden"/>
                   </div>


                    <div>
                        &nbsp;&nbsp;&nbsp;
                        参数：
                        <input class="easyui-textbox" type="text"  style="width: 600px" name="params">
                        <a href="javascript:void(0)" onclick="">参数说明</a>
                    </div>
                </div>
            </div>



            <div style="height: 450px;padding-left: 0px;float: left;margin-top: 10px;">





                <div style="padding: 0px 0 0 0;">
                    <a id="clusterers_start_btn" class="easyui-linkbutton" style="width: 110px;margin-left: 8px;">开始</a>
                    <a class="easyui-linkbutton" style="width: 110px;margin-left: 8px;">停止</a>
                </div>

                <div>
                    <div style="padding: 6px 0 0 10px;height: 24px;">输出结果</div>
                    <div>
                        <input class="easyui-textbox" data-options="multiline:true,editable:false"
                               style="width: 240px;height: 386px;">
                    </div>
                </div>

            </div>

            <div style="width: 700px;float: right;border: 1px solid rgb(221,221,221);margin-top: 10px;padding: 4px">
                <div style="padding: 8px 0 0 10px;height: 24px;">分类器输出结果</div>
                <div>
                  <%--  <input class="easyui-textbox" data-options="multiline:true,editable:false"
                           id="clusterers_result_view_input"
                           style="width: 100%;height: 400px; " >--%>


                    <input class="easyui-textbox" data-options="multiline:true,editable:true"
                           id="clusterers_result_view_input"
                           style="width: 100%;height: 400px;">

                    <%--  <div  id="classify_result_view_input"
                            style="width: 100%;height: 400px;border: 1px solid rgb(221,221,221)">

                      </div>--%>


                </div>
            </div>


        </div>


    </div>

</div>






</body>
</html>

